---
title: Child field
summary: >-
  The child field allows you to embed an editable region inside of a component
  block preview.
---
The `child` field allows you to embed an editable region inside of a component block preview.

See the [document field](/docs/fields/document) for more information about component blocks.

## Usage example

```typescript
document: fields.document({
  label: 'Document',
  formatting: true,
  links: true,
  componentBlocks: {
    quote: component({
      preview: () => null,
      label: 'Quote',
      schema: {
        // Make the quote editable
        content: fields.child({
          kind: 'block',
          placeholder: 'Quote...',
          formatting: { inlineMarks: 'inherit', softBreaks: 'inherit' },
          links: 'inherit',
        }),
        // Make the attribution editable
        attribution: fields.child({ kind: 'inline', placeholder: 'Attribution...' }),
      },
    }),
  },
}),
```

You can nest component blocks within each other by setting `componentBlocks: 'inherit'` on the child field:

```ts
document: fields.document({
  label: 'Document',
  formatting: true,
  componentBlocks: {
    sectionContainer: component({
      // A preview is needed to show the child field
      preview: ({fields}) => (
        <div style={{ padding: '1rem 0' /* styling is up to you */ }}>
          {fields.children.element}
        </div>
      ),
      label: 'Section Container',
      schema: {
        content: fields.child({
          kind: 'block',
          componentBlocks: 'inherit'
          placeholder: 'Add component blocks here...',
        }),
      },
    }),
  },
}),
```

## Type signature

Find the latest version of this field's type signature at: [https://docsmill.dev/npm/@keystatic/core@latest#/.fields.child](https://docsmill.dev/npm/@keystatic/core@latest#/.fields.child)
